<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <script src="/webjars/jquery/3.6.4/jquery.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .table {
            text-align: center;
        }

        .clearfix:after {
            content: '\20';
            display: block;
            height: 0;
            clear: both
        }

        .clearfix {
            zoom: 1
        }
    </style>
</head>
<body>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">
                <h3>学生列表(SpringBoot + MP + Thymeleaf模板 + WebJars)</h3>
            </h3>
        </div>
        <table class="table table-hover table-striped ">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>住址</td>
                <td>所在班级</td>
                <td>操作</td>
            </tr>
            <tr th:each="stud : ${pr.rows}">
                <td>[[${stud.sid}]]</td>
                <td>[[${stud.sname}]]</td>
                <td>[[${stud.sex}]]</td>
                <td>[[${stud.age}]]</td>
                <td>[[${stud.addr}]]</td>
                <td>[[${stud.cname}]]</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm"
                       th:if="${#lists.contains(authorities, 'student:update')}"
                       th:onclick="updateStudent([[${stud.sid}]],[[${stud.sname}]],[[${stud.sex}]],[[${stud.age}]],[[${stud.addr}]],[[${stud.cid}]])">修改</a>
                    <a href="javascript:;"  th:onclick="delStudent([[${stud.sid}]])"
                       th:if="${#lists.contains(authorities, 'student:delete')}"
                       class="btn btn-danger btn-sm">删除</a>
                </td>
            </tr>
        </table>

        <div class="panel-footer text-right clearfix">
            <!--0. 条件查询-->
            <form class="form-inline " style="float:left;margin-top: 20px;" action="/student/search" method="post">
                <div class="form-group">
                    <input type="text" class="form-control" name="sname" th:value="${vo.sname}" placeholder="输入学生姓名">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" name="addr"  th:value="${vo.addr}" placeholder="学生住址">
                </div>
                <input type="hidden" name="page" id="page" th:value="1">
                <div class="form-group">
                    <select class="form-control" name="cid" placeholder="所在班级">
                        <option value="0">所有班级</option>
                        <option th:each="c : ${classes}" th:value="${c.cid}"
                                th:selected="${c.cid == vo.cid }" >[[${c.cname}]]</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-default">查询</button>
                <button type="button" class="btn btn-success" onclick="addStudent()"
                        th:if="${#lists.contains(authorities, 'student:create')}">添加</button>
            </form>

            <!--删除学生的表单,为了进行restFULL演示-->
            <form  method="post" name="formDelete">
                <input type="hidden" name="_method" value="delete">
            </form>

            <div class="modal fade" id="myModal" style="text-align: left;">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="title">添加学生</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" method="post" action="/student/add" name="formSave">
                                <input type="hidden" name="sid" id="sid">
                                <input type="hidden" name="_method" id="_m" value="put"/>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">学生姓名</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="sname" id="sname" placeholder="输入学生姓名">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">学生性别</label>
                                    <div class="col-sm-10">
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="sex" id="sex1" value="男">男
                                            </label>
                                            <label>
                                                <input type="radio" name="sex" id="sex2" value="女">女
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">学生年龄</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="age" id="age" placeholder="输入学生年龄">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">学生住址</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="addr" id="addr" placeholder="输入学生住址">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">所在班级</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" name="cid" id="cid">
                                            <option th:each="c : ${classes}" th:value="${c.cid}">[[${c.cname}]]</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="save()">保存学生</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--1. 分页导航-->
            <nav aria-label="Page navigation" style="float:right">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li th:each="page : ${#numbers.sequence(1,pr.totalPage)}"
                        th:class="${page == pr.page ? 'active' : ''}">
                        <a href="javascript:;" th:onclick="skipPage([[${page}]])">[[${page}]]</a>
                    </li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>
<script>
    function skipPage(page) {
        //1. 为表单隐藏域page(当前页)赋值
        $("#page").val(page)
        //2. 提交表单
        document.forms[0].submit()
    }
    function delStudent(sid){
        if(confirm('你真的要删除吗?')){
            //1. 为表单隐藏域赋值
            $("#sid").val(sid)
            //2. 提交表单
            document.formDelete.action = "/student/delete/" + sid;
            document.formDelete.submit()
        }
    }
    // 3. 添加学生
    function  addStudent(){
        //3.1 修改对话框标题
        $("#title").html("添加学生")
        //3.2 清空表单数据
        document.formSave.reset();
        //3.3 打开对话框
        $('#myModal').modal('show')
        //3.4 为隐藏域_method赋值为post请求
        $("#_m").val("post")
    }
    //4. 修改学生
    function updateStudent(sid,sname,sex,age,addr,cid){
       //4.1 为表单控件赋值
       $("#sid").val(sid)
       $("#sname").val(sname)
       $("#sex1").prop("checked",sex=='男'?true:false)
       $("#sex2").prop("checked",sex=='女'?true:false)

       $("#age").val(age)
       $("#addr").val(addr)
       $("#cid").val(cid)
        //4.2 修改对话框标题
        $("#title").html("修改学生")
        //4.3 打开对话框
        $('#myModal').modal('show')
        //4.4 为隐藏域_method赋值为post请求
        $("#_m").val("put")
    }
    //5. 保存学生
    function save(){
        //5.1 根据表单隐藏域中sid是否有值,决定是添加还是修改
        let sid = $("#sid").val()
        if(sid){
            document.formSave.action = "/student/update"
        }
        //5.2 提交表单
        document.formSave.submit()

    }
</script>